import React, {useContext} from "react";
import styles from './robot.module.css'
import {appContext,appSetContext} from "../appState";
interface RobotProps {
    name:string;
    id:number;
    email:string
}


const Robot: React.FC<RobotProps> = ({name,id,email})=>{
    const value = useContext(appContext)
    const addItem = useContext(appSetContext)
    const handleAddItem = ()=>{
        if(addItem){
            addItem(state=>{
                return{
                    ...state,
                    shoppingCart:{
                        items:[...state.shoppingCart.items,{name,id,email}]
                    }
                }
            })
        }
    }
    return (
        <li className={styles.cardContainer}>
            <img src={`https://robohash.org/${id}`} alt="robot"/>
            <h2>{name}</h2>
            <p>{email}</p>
            <p>{value.username}</p>
            <button onClick={handleAddItem}>加入购物车</button>
        </li>
    )
}

export default Robot